<!-- pages/flight-booking/flight-booking.vue -->
<template>
	<view class="booking-container">
		<view class="header">请选择您的行程</view>
		<picker-view
			:value="selectedIndexes"
			indicator-style="height: 50px; border-top: 1px solid #005A9C; border-bottom: 1px solid #005A9C;"
			:indicator-class="indicatorClass"
			mask-style="background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 0.6)), linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6));"
			:mask-class="maskClass"
			:immediate-change="false"
			@change="handleFlightChange"
			@pickstart="handlePickStart"
			@pickend="handlePickEnd"
			class="flight-picker-view"
		>
			<picker-view-column>
				<view v-for="city in cities" :key="city" class="picker-item">{{ city }}</view>
			</picker-view-column>
			<picker-view-column>
				<view v-for="city in arrivalCities" :key="city" class="picker-item">{{ city }}</view>
			</picker-view-column>
		</picker-view>
		<view class="result-panel">
			<view class="status-text">{{ pickingStatus }}</view>
			<view>
				出发:
				<text class="city-name">{{ finalSelection.from }}</text>
			</view>
			<view>
				到达:
				<text class="city-name">{{ finalSelection.to }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			cities: ['北京', '上海', '广州', '深圳', '成都', '杭州', '重庆'],
			selectedIndexes: [0, 0], // 初始：北京 -> 上海 (上海在排除北京后的列表里索引是0)
			finalSelection: { from: '北京', to: '上海' },
			pickingStatus: '请滑动选择',
			indicatorClass: 'custom-indicator',
			maskClass: 'custom-mask'
		};
	},
	computed: {
		arrivalCities() {
			// 如果 this.selectedIndexes 还未初始化完成，则返回空数组避免报错
			if (!this.selectedIndexes || this.selectedIndexes.length < 1) {
				return [];
			}
			const departureCity = this.cities[this.selectedIndexes[0]];
			return this.cities.filter((city) => city !== departureCity);
		}
	},
	mounted() {
		this.updateFinalSelection();
	},
	methods: {
		// 核心处理逻辑
		handleFlightChange(event) {
			const newIndexes = event.detail.value;
			const oldDepartureIndex = this.selectedIndexes[0];
			const newDepartureIndex = newIndexes[0];
			const newArrivalIndex = newIndexes[1];

			// 判断是否是出发城市发生了改变
			if (oldDepartureIndex !== newDepartureIndex) {
				// 出发城市改变，我们需要重置到达城市的索引为0
				this.selectedIndexes = [newDepartureIndex, 0];

				// 使用 $nextTick 等待 computed 属性 arrivalCities 更新完毕
				// 然后再更新最终的显示结果
				this.$nextTick(() => {
					this.updateFinalSelection();
				});
			} else {
				// 只是到达城市改变，直接更新索引
				this.selectedIndexes = [newDepartureIndex, newArrivalIndex];
				this.updateFinalSelection();
			}
		},

		// 将更新最终选择的逻辑提取为独立方法，提高复用性
		updateFinalSelection() {
			this.finalSelection.from = this.cities[this.selectedIndexes[0]];
			// 从更新后的 arrivalCities 列表中获取正确的到达城市
			this.finalSelection.to = this.arrivalCities[this.selectedIndexes[1]];
		},

		handlePickStart() {
			this.pickingStatus = '正在选择...';
		},

		handlePickEnd() {
			this.pickingStatus = '选择完成！';
			// 在结束滚动时，也可以再同步一次最终状态，确保万无一失
			this.updateFinalSelection();
		}
	}
};
</script>

<style scoped>
.booking-container {
	padding: 15px;
	font-family: sans-serif;
	text-align: center;
}
.header {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 10px;
}
.flight-picker-view {
	width: 100%;
	height: 300px;
}
.picker-item {
	line-height: 50px;
	text-align: center;
	font-size: 16px;
}
.result-panel {
	margin-top: 20px;
	padding: 15px;
	border: 1px solid #eee;
	border-radius: 8px;
}
.status-text {
	color: #888;
	margin-bottom: 10px;
}
.city-name {
	color: #005a9c;
	font-weight: bold;
}

/* /deep/ 用于穿透 scoped 的样式隔离 */
/* 注意：这个类名在上面模板中通过 :indicator-class 绑定 */
.flight-picker-view /deep/ .custom-indicator {
	/* 假设我们想添加一个伪元素实现更复杂的效果，就需要用class */
	/* 这里仅作演示，实际效果由 indicator-style 控制 */
}
/* 注意：这个类名在上面模板中通过 :mask-class 绑定 */
.flight-picker-view /deep/ .custom-mask {
	/* 如果 mask-style 不足以满足需求，可以在这里写更复杂的样式 */
	/* 例如，使用伪元素添加额外的装饰性元素 */
}
</style>
